<template>
  <div class="app-container">
    <div class="header">
      <el-button type="danger">新增凭证</el-button>
      <el-button type="success">科目余额</el-button>
      <el-button type="info">现金日记账</el-button>
      <el-button type="warning">银行日记账</el-button>
    </div>

    <div class="fund-status">
      <div class="fund-item">
        <h3>库存现金</h3>
        <p>-- 元</p>
      </div>
      <div class="fund-item">
        <h3>银行存款</h3>
        <p>-- 元</p>
      </div>
      <div class="fund-item">
        <h3>应收账款</h3>
        <p>-- 元</p>
      </div>
      <div class="fund-item">
        <h3>其他应收款</h3>
        <p>-- 元</p>
      </div>
    </div>

    <div class="financial-analysis">
      <h2>财务分析</h2>
      <el-row>
        <el-col :span="12">
          <h3>银行存款趋势分析</h3>
          <el-line-chart :data="bankDepositTrendData"></el-line-chart>
        </el-col>
        <el-col :span="12">
          <h3>利润分析</h3>
          <el-pie-chart :data="profitAnalysisData"></el-pie-chart>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const bankDepositTrendData = ref({
  labels: [
    "1月",
    "2月",
    "3月",
    "4月",
    "5月",
    "6月",
    "7月",
    "8月",
    "9月",
    "10月",
    "11月",
    "12月",
  ],
  datasets: [
    {
      label: "银行存款",
      data: [0.542, 0.6, 0.5, 0.7, 0.8, 0.6, 0.9, 0.4, 0.5, 0.6, 0.7, 0.8],
      borderColor: "#42A5F5",
      fill: false,
    },
  ],
});

const profitAnalysisData = ref([
  { name: "职工服务支出", value: 0 },
  { name: "业务支出", value: 0 },
  { name: "职工活动支出", value: 0 },
]);
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.fund-status {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.fund-item {
  flex: 1;
  text-align: center;
  border: 1px solid #e0e0e0;
  padding: 20px;
  margin: 0 10px;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.financial-analysis {
  margin-top: 20px;
}
</style>
